<template>
	<div class="home">
		<home-swipe :carouselItems="carouselItems">

		</home-swipe>
		<home-enter></home-enter>
		<!-- 首页功能快捷入口 Grid宫格-->
		<!-- 排行榜 -->
		<home-product :productItems="ranking"></home-product>
		<!-- 精品推荐 -->
		<home-now :recommendedItems="recommendedItems"></home-now>

	</div>
</template>

<script>
	// 导入封装后的首页接口
	import {
		getHomeListAPI,
	} from '@/api/home.js';

	import HomeSwipe from './components/HomeSwipe.vue';
	import HomeProduct from './components/HomeProduct.vue';
	import HomeEnter from './components/HomeEnter.vue';
	import HomeNow from './components/HomeNow.vue';
	export default {
		name: 'home',
		components: {
			HomeSwipe,
			HomeProduct,
			HomeEnter,
			HomeNow,

		},

		data() {
			return {
				carouselItems: [],
				recommendedItems: [],
				ranking: [],
			}
		},
		created() {
			getHomeListAPI().then((result) => {
				console.log(result);
				this.carouselItems = result.data.carouselItems; //轮播项
				this.recommendedItems = result.data.recommendedItems; //推荐项  
				this.ranking = result.data.ranking; //最新上架
			})
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					// name: 'productDetail',
					// params: {id }
					path: `/product/detail/${id}`
				})
			},
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
		}
	}
</script>
<style lang="less" scoped>
	.home{
		padding-bottom: 4rem;
	}
</style>
